<html>
<head>
<title>ShapeFastWeakSignin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript">

	var globals = {
		canvas:0,
		saved:0,
		precision:"50.0",
		iPrecision: 50
	}
	
	var shapes = {
		dist: function (a,b) {
			var d = Number((b.x-a.x)*(b.x-a.x) +
					(b.y-a.y)*(b.y-a.y));
			return Math.sqrt(d);
		},
		
		shape_length: function (data) {
			var res = parseFloat("0");
			for (var cpt = 0; cpt < data.length - 1; cpt++) {
				res += shapes.dist(data[cpt], data[cpt+1]);
			}
			return res;
		},
		
		normalize: function (data) {
			if(data.length < 2)
				return data;
			
			var new_data = new Array();
			var average = shapes.shape_length(data) / parseFloat(globals.precision);
			var seg_len_cur = 0.0;
			var seg_len_tst = 0.0;
			var current_test = data[1];
			
			new_data[0] = data[0];
			for (var cpt = 1; cpt < data.length; cpt++) {
				var offset = shapes.dist(data[cpt],current_test);
				seg_len_tst = seg_len_cur + offset;
				
				if (seg_len_tst < average) {
					seg_len_cur = seg_len_tst;
					current_test = data[cpt];
				} else {
					var pos_interp = (average - seg_len_cur) * (1.0 / offset);
					current_test = {
						x:((1 - pos_interp) * current_test.x + pos_interp * data[cpt].x),
						y:((1 - pos_interp) * current_test.y + pos_interp * data[cpt].y)
					};
					new_data[new_data.length] = current_test;
					if (Math.abs(new_data.length - globals.precision) < 1) return new_data;
					seg_len_cur = 0.0;
					cpt--;
				}
			}
			return new_data;
		}, 

		//vect from two point + normalize
		vect: function (a,b) {
			var l = shapes.dist(a,b);
			return {
				x:(b.x-a.x)/l,
				y:(b.y-a.y)/l
			};
		},


		diff: function(base_data,new_data) {
			var ret = 0.0;
			if (base_data.length != new_data.length || new_data.length != globals.iPrecision) {
				return 0;
			}
			for (var cpt = 1; cpt < base_data.length; cpt++) {
				var v1 = shapes.vect(base_data[cpt-1],base_data[cpt]);
				var v2 = shapes.vect(new_data[cpt-1],new_data[cpt]);
				//dot product to calculate angle diff
				var dot = (v1.x*v2.x) + (v1.y*v2.y);
				ret += dot;
			}
			ret = ret * 100;
			ret = ret / (globals.iPrecision -1);
			return ret;
		}
	}

	function SAVE() {
		globals.saved = shapes.normalize(event_listener.data);
	}
	
	function CLEAR() {
		globals.canvas.fillStyle = "#000";
		globals.canvas.fillRect(0,0,document.getElementById("toile").width,document.getElementById("toile").height);
		document.getElementById("output").innerHTML = "cleared";
	}
	
	function LOAD() {
		globals.canvas.lineWidth = 3;
		globals.canvas.strokeStyle = 'white';
		globals.canvas.beginPath();
		globals.canvas.moveTo(globals.saved[0].x,globals.saved[0].y);
		for (var cpt = 1; cpt < globals.saved.length; cpt++) {
			globals.canvas.lineTo(globals.saved[cpt].x,globals.saved[cpt].y);
		}
		globals.canvas.stroke();
		document.getElementById("output").innerHTML = "load";
	}
	
	var event_listener = {
		inside: 0,
		data: new Array(),
		handleEvent: function(e) {
			switch (e.type) {
				case 'mousedown':
					if (e.toElement.id == "toile") {
						//delete event_listener.data;
						console.log("detele");
						globals.canvas.lineWidth = 3;
						globals.canvas.strokeStyle = 'white';
						globals.canvas.beginPath();
						globals.canvas.moveTo(e.layerX,e.layerY);
						event_listener.inside=1;
						event_listener.data = new Array();
						event_listener.data[0] = {x:e.layerX,y:e.layerY};
						document.getElementById("output").innerHTML = "drawing...";
					}
				break;
				case 'mousemove':
					if (event_listener.inside==1) {
						globals.canvas.lineTo(e.layerX,e.layerY);
						globals.canvas.stroke();
						event_listener.data[event_listener.data.length] = {x:e.layerX,y:e.layerY};
					}
				break;
				case 'mouseup':
					if (event_listener.inside==1) {
						event_listener.inside=0;
						globals.canvas.lineTo(e.layerX,e.layerY);
						event_listener.data[event_listener.data.length] = {x:e.layerX,y:e.layerY};
						globals.canvas.stroke();
						if (typeof (globals.saved) != "undefined" && globals.saved.length == globals.iPrecision) {
							var norm = shapes.normalize(event_listener.data);
							event_listener.score = shapes.diff(globals.saved, norm);
							if (event_listener.score > 90)
								document.getElementById("output").innerHTML = "accepted:" + event_listener.score;
							else
								document.getElementById("output").innerHTML = "refused:" + event_listener.score;
						} else {
							document.getElementById("output").innerHTML = "drew";
						}
					}
				break;
				default:
				break;
			}
		}
	};

	document.addEventListener('DOMContentLoaded', function() {
		globals.canvas = document.getElementById("toile").getContext("2d");;
		document.addEventListener('mousedown', event_listener, false);
		document.addEventListener('mousemove', event_listener, false);
		document.addEventListener('mouseup', event_listener, false);
	});
</script>
<style type="text/css">
/*global*/
body {
	background-color: #000;
	color: white;
	margin: 50 px;
	}
.span_button {
	margin: 5 px;
	background-color: #333;
	border: 1px solid white;
}
</style>
</head>
<body>
	<canvas id="toile" width="640" height="480"></canvas>
	<div>
	<a href="#" onclick="SAVE()"><span class="span_button" id="save">SAVE</span></a>
	<a href="#" onclick="LOAD()"><span class="span_button" id="load">LOAD</span></a>
	<a href="#" onclick="CLEAR()"><span class="span_button" id="load">CLEAR</span></a>
	</div>
	<div id="output">OUTPUT</div>
</body>
</html>